<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城的登录/注册</title>
    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/homeWork4.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="root">
        <div class="Box">
            <!-- 左边部分 -->
            <div class="Box_left">
                <img :src="img.src">
            </div>
            <!-- 左边部分 end-->
            <!-- 右边部分 -->
            <div class="Box_right">
                <!-- 头部导航 -->
                <div class="rightHeader" >
                    <div class="header_title" v-for="item in header">
                        <img :src="item.pic.src" >
                        <p>{{item.title}}</p>
                    </div>
                    <ul class="titleUl" v-cloak>
                        <li v-for="titleLists in titleList" class="titleLi" @mouseover="titleLists.show=!titleLists.show" @mouseout="titleLists.show=!titleLists.show">
                            <a :href="titleLists.url">{{titleLists.title}}</a>
                            <ul class="sub">
                                <li v-for="subMenus in titleLists.subMenu" v-show="titleLists.show" class="subLi">
                                    <a :href="subMenus.url">{{subMenus.title}}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- 头部导航 end-->
                <!-- 中间登录/注册 -->
                <div class="midleContainer">
                    <div class="container">
                        <!-- 上方二维码 -->
                        <div class="container_yard">
                            <div class="yard">
                                <span class="yard_switch"><i class="iconfont icon-erweima"></i></span>
                            </div>
                        </div>
                        <!-- 上方二维码 end-->
                        <!-- 下方登录注册 -->
                        <div class="container_login login_text">
                            <!-- 标题 -->
                            <div class="login_title">
                                <div class="titleContent">
                                    <div class="titleContent_register" @click="login">
                                        <a href="#" class="enroll" :class="[loginshow ? 'homon':'' ]">登录</a>
                                        <div :class="[loginshow  ? 'line':'' ]"></div>
                                    </div>
                                    <div class="titleContent_enroll" @click="enroll">
                                        <a href="#" class="register" :class="[regshow ? 'homon':'' ]">注册</a>
                                        <div :class="[regshow ? 'line':'' ]"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- 登录界面-->
                            <div class="login_form" v-if="loginshow">
                                <div class="formInput">
                                    <input type="text" class="phone" placeholder="邮箱/手机号码/小米ID" v-model="user.tel"  @blur="account($event)">
                                    <span v-show="zh">请输入账号</span>
                                </div>
                                <div class="formInput1">
                                    <input type="password" class="phone " placeholder="密码" v-model="user.password" @blur="pwd($event)">
                                    <span v-show="passw">请输入账号</span>
                                </div>
                                <div class="formDeal">
                                    <span class="checked">
                                        <input type="checkbox" class="check ">
                                    </span>
                                    <span class="deal">
                                        已阅读并同意小米帐号 
                                        <a href="#">用户协议</a>和
                                        <a href="#">隐私政策</a>
                                    </span>
                                </div>
                                <button type="submit" class="btn"  @click="login">登录</button>
                                <div class="forget">
                                    <a href="#">忘记密码？</a>
                                    <a href="#">手机号登录</a>
                                </div>
                            </div>
                            <!-- 登录界面end-->
                            <!-- 注册界面-->
                            <div class="login_form" v-if="regshow">
                                <!-- 选择国家和地区 -->
                                <div class="registerInput">
                                    <div class="registerInput_control">
                                        <div class="registerInput_control_from mi_select">
                                            <div class="mi_selector">
                                                <span class="search">
                                                    <select type="search" class="searchInput" v-model="user.selCityId">
                                                        <option value="">未选择</option>
                                                        <option :value="city.id" v-for="city in citys">{{city.name}}</option>
                                                    </select>
                                                </span>
                                            </div>
                                        </div>
                                        <label class="mi_label">国家/地区<br><strong>中国</strong></label>
                                    </div>
                                </div>
                                <!-- 选择国家和地区 end-->
                                <!-- 手机号 -->
                                <div class="registerInput1">
                                    <div class="registerInput_control">
                                        <div class="registerInput_control_from mi_select">
                                            <div class="mi_selector">
                                                <span class="search">
                                                    <input type="text" class="searchInput" placeholder="手机号" v-model="user.tel" @blur="telPhone($event)">
                                                    <span v-show="phone">请输入手机号</span>
                                                </span>
                                                <!-- <span class="registerTxt">中国</span> -->
                                            </div>
                                            <span class="select_arrow1">
                                                <i class="iconfont icon-xiajiantou"></i>
                                            </span>
                                        </div>
                                        <label class="mi_label">国家码<br>+86</label>
                                    </div>
                                </div>
                                <!-- 手机号 end-->
                                <!-- 获取验证码 -->
                                <div class="registerInput2">
                                    <div class="registerInput_control">
                                        <div class="registerInput_control_from mi_select">
                                            <div class="mi_selector">
                                                <span class="search">
                                                    <input type="text" class="searchInput">
                                                </span>
                                                <!-- <span class="registerTxt">中国</span> -->
                                            </div>
                                            <div class="gainCode">
                                                <button type="button" class="gain_code" @click="gCode">获取验证码</button>
                                            </div>
                                        </div>
                                        <div class="mi_code">请输入验证码</div>
                                    </div>
                                </div>
                                <!-- <div class="formInput1">
                                    <input type="text" class="phone " placeholder="密码">
                                </div> -->
                                <!-- 获取验证码 end-->
                                <div class="formDeal">
                                    <span class="checked">
                                        <input type="checkbox" class="check ">
                                    </span>
                                    <span class="deal">
                                        已阅读并同意小米帐号 
                                        <a href="#">用户协议</a>和
                                        <a href="#">隐私政策</a>
                                    </span>
                                </div>
                                <button type="submit" class="btn" @click="login">登录</button>
                                <div class="forget">
                                    <a href="#">收不到验证码？</a>
                                    <!-- <a href="#">手机号登录</a> -->
                                </div>
                            </div>
                            <!-- 注册界面end-->
                        </div>
                        <!-- 下方登录注册end -->
                        <!-- 其他方式登录 -->
                        <div class="other_login1">
                            <div class="other">其他方式登录</div>
                            <div class="otherThed">
                                <i class="iconfont icon-zhifubao"></i>
                                <i class="iconfont icon-weixin"></i>
                                <i class="iconfont icon-qq"></i>
                                <i class="iconfont icon-weibo"></i>
                            </div>
                        </div>
                        <!-- 其他方式登录 end-->
                    </div>
                </div>
                <!-- 中间登录/注册 end-->
                <!-- 底部版权 -->
                <div class="copy">
                    小米公司版权所有-京ICP备10046444-
                    <a href="#">京公网安备11010802020134号</a>
                    -京ICP证110507号
                </div>
                <!-- 底部版权 end-->
            </div>
            <!-- 右边部分 end-->
        </div>
    </div>
    <script src="js/homeWork4.js"></script>
</body>
</html>